<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新用户注册</title>
<script type="text/javascript">
	var xmlHttp=null;
	function checkLoginName(obj){
		var loginName=obj.value;
		console.log(loginName);
		//如果用户名为空字符串,则不发出异步请求
		if(loginName.trim().length==0){
			return;
		}
		//1.创建一个ajax核心引擎对象XMLHttpRequest对象 ,不同浏览器支持的ajax引擎对象创建方式不同
		xmlHttp=GetXmlHttpObject();
		//2.设置异步请求回调函数(用来指定请求成功后响应结束之后的dom操作)
		xmlHttp.onreadystatechange=stateChanged;//随之状态码的动态改变stateChanged()会被多次触发,类似于指针指向这个方法
		//3.构建异步请求url
		var url ="getAjax?loginName="+loginName;
		//4.封装请求的发送方式和url以及是否以异步方式发送
		xmlHttp.open("GET",url,true);
		//5.执行异步请求
		xmlHttp.send(null);
		
	}
	//获取ajax引擎对象的函数封装
	function GetXmlHttpObject(){
		try{
			//火狐,opera 8.0+, safari
			xmlHttp=new XMLHttpRequest();
		}catch(e){
			//IE
			try{
				xmlHttp=new ActiveXObject("Msxm12.XMLHTTP");
				
			}catch(e){
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return xmlHttp;
	}
	function stateChanged(){
		if(xmlHttp.readyState==4 && xmlHttp.status==200){
			console.log("-------请求发出成功--------------")
			document.getElementById("msg").innerHTML=xmlHttp.responseText
		}
	}
</script>
</head>
<body>
	<form >
		账号         :<input type="text" name="loginName" onblur="checkLoginName(this);">
				<span id="msg"></span><br>			
		密码         :<input type="password" name="pwd"><br>
		确认密码 :<input type="password"> 
		<input type="submit"value="注册">
	</form>
</body>
</html>